<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>信息推送-数据看板</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/element-ui.css" />
    <link rel="stylesheet" href="../common/css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="app" class="page-container" v-cloak>
      <div class="page-content">
        <el-row :gutter="10">
          <!-- 页面标题 -->
          <el-col :span="24">
            <div class="panel-title">信息推送-人工推动信息查看率</div>
          </el-col>
        </el-row>
        <div class="panel-container">
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="panel-line time">
                <el-form
                  :model="filterForm"
                  size="mini"
                  :inline="true"
                  ref="filterFormRef"
                  class="form-filter"
                >
                  <el-form-item>
                    <el-radio-group
                      v-model="tabActiveTime"
                      size="mini"
                      @change="handleChange"
                    >
                      <el-radio-button
                        v-for="item in tabListTime"
                        :key="item.id"
                        :label="item.id"
                        >{{ item.label }}</el-radio-button
                      >
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item>
                    <el-date-picker
                      size="mini"
                      v-model="dateRange"
                      @change="handleRangeChange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="推送方式:" prop="push_channel">
                    <el-select
                      v-model="filterForm.push_channel"
                      @change="getInfo"
                      clearable
                    >
                      <el-option label="APP推送" value="1"></el-option>
                      <el-option label="服务号推送" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="信息类型:" prop="msg_type">
                    <el-select
                      v-model="filterForm.msg_type"
                      @change="getInfo"
                      clearable
                    >
                      <el-option label="资产信息" value="1"></el-option>
                      <el-option label="拍卖招标" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="推送人:" prop="crm_push_mans">
                    <el-select
                      v-model="filterForm.crm_push_mans"
                      @change="getInfo"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in manList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
              <div class="panel-line other">
                <div class="panel-title">
                  <div class="tab-list">
                    <div
                      class="tab"
                      :class="{ active: tabActiveShowType === 1 }"
                      @click="handleShowTypeClick(1)"
                    >
                      推送汇总
                    </div>
                    <div
                      class="tab"
                      :class="{ active: tabActiveShowType === 2 }"
                      @click="handleShowTypeClick(2)"
                    >
                      推送图表
                    </div>
                    <div
                      class="tab"
                      :class="{ active: tabActiveShowType === 3 }"
                      @click="handleShowTypeClick(3)"
                    >
                      推送明细
                    </div>
                  </div>
                </div>
                <el-radio-group
                  class="time-type"
                  v-model="tabActiveTimeType"
                  @change="handleTimeTypeChange"
                  style="margin-right: 30px"
                  size="mini"
                >
                  <el-radio-button
                    v-for="item in tabListTimeType"
                    :key="item.id"
                    :label="item.id"
                    >{{ item.label }}</el-radio-button
                  >
                </el-radio-group>
              </div>
              <div class="tab-content" v-if="tabActiveShowType === 1">
                <el-table
                  stripe
                  :data="infoTable.list"
                  size="mini"
                  :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
                  ref="infoTable"
                  style="width: 100%"
                  v-loading="infoTable.loading"
                  key="infoTable"
                >
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="日期"
                    prop="date"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="推送信息数量"
                    prop="push_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="推送总人数"
                    prop="push_people"
                  ></el-table-column>

                  <el-table-column
                    align="center"
                    header-align="center"
                    label="推送成功总人数"
                    prop="push_success"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="负责客户数"
                    prop="user_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="排重后推送人数"
                    prop="deduplication_push_people"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="已读总人数"
                    prop="read_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="查看人数"
                    prop="view_num"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="推送成功率"
                    prop="success_rate"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.success_rate }}%
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="读取率"
                    prop="read_rate"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.read_rate }}%
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="采纳率"
                    prop="accept_rate"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.accept_rate }}%
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="客户推送覆盖率"
                    prop="coverage_rate"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.coverage_rate }}%
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="tab-content" v-if="tabActiveShowType === 2">
                <div class="echats-box" v-loading="infoTable.loading">
                  <div id="echarts" class="echarts"></div>
                </div>
              </div>
              <div class="tab-content" v-if="tabActiveShowType === 3">
                <el-table
                  stripe
                  :data="detailTable.list"
                  size="mini"
                  :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
                  ref="detailTable"
                  style="width: 100%"
                  v-loading="detailTable.loading"
                  key="detailTable"
                >
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="信息ID"
                    prop="id"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="推送人数"
                    prop="push_num"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="成功推送人数"
                    prop="success_num"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="已读人数"
                    prop="read_num"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    header-align="center"
                    label="查看人数"
                    prop="view_num"
                  >
                  </el-table-column>
                </el-table>
                <el-pagination
                  small
                  background
                  :current-page="detailTable.pageNumber"
                  :page-size="detailTable.pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="detailTable.total"
                  @current-change="currentChangeHandle"
                  @size-change="sizeChangeHandle"
                  layout="total, sizes, prev, pager, next, jumper"
                  style="margin-top: 20px; text-align: right"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/element-ui.js"></script>
    <script src="../common/js/echarts.min.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
